<template>
  <div>
    <!-- 动画：
        transition实现，它是一个组件标签
        动画条件：进入/离开动作（最常见：v-if/v-show）
        实现：
           用transition包住动画元素
           给transition加入name='xxx'
           关键有四个class配制
              .xxx-enter:起点状态（希望从什么状态变成正常显示状态）
              .xxx-enter-active：控制动进入动画的时长与曲线之类(承载:transition或者animation的css)
              .xxx-leave-to：终点状态（希望从正常状态变到什么状态）
              .xxx-leave-active：控制离开动画的时长与曲线之类(承载:transition或者animation的css)

-->
    <button @click="bol = !bol">点击切换显示</button>
    <transition name="abc">
      <div v-if="bol" class="box" />
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bol: true
    }
  },
  methods: {
    btnClick() {}
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 50px;
  height: 50px;
  background-color: #f00;
  margin: 0 auto;
}
.abc-enter,
.abc-leave-to {
  opacity: 0;
  // transform: translateX(-200px);
}
.abc-enter-active,
.abc-leave-active {
  transition: all 0.5s;
}
// .abc-leave-to {
//   // transform: translateX(200px);
//   opacity: 0;
// }
</style>
